<template>
  <div class="page">
    <div class="rightbox">
      <div class="nav">
        <div class="tab active">账户登录</div>
        <div style="clear:both;"></div>
        <div class="loginform">
          <el-form :model="login" ref="login" :rules="rules">
            <el-form-item prop="username">
              <el-input v-model="login.username" placeholder="请输入你的用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="login.password" type="password" placeholder="请输入你的密码(密码长度为6-20)"></el-input>
            </el-form-item>
            <el-button
              type="text"
              style="padding-top:0;float:right;"
              @click="$router.push('register')"
            >注册账号</el-button>
            <el-button type="success" style="width:100%;" @click="Login()">登录</el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      login: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 6, max: 25, message: "长度在 6 到 25 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    Login() {
      
      this.$refs['login'].validate(valid => {
        if (valid) {
          //success
          this.$store.dispatch('user/login',this.login).then(res=>{
            // window.console.log('res',res);
            this.$message.success("登录成功")
            this.$router.push("/")
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.rightbox {
  width: 450px;
  margin-top: 100px;
  margin-right: 150px;
  float: right;
  background: rgba(238, 250, 216, 0.637);
  box-shadow: 20px 20px #d0ddf0ba;
}
.page {
  // background-color: #f6f6f6;
  background: url("../../assets/79-1910291126417.jpg") no-repeat;
  height: 550px;
}
.nav {
  height: 100%;
  .tab {
    background: #eee;
    width: 100%;
    height: 70px;
    font-size: 16px;
    text-align: center;
    line-height: 50px;
    // box-shadow: 0px 0px 5px 1px #ddd;
    &.active {
      background: white;
      box-sizing: border-box;
      border-bottom: 8px solid #a8bfe845;
    }
    &:hover {
      cursor: pointer;
    }
  }
}
.loginform {
  background: white;
  padding: 50px;
  margin: 0 auto;
}
</style>